<template>
    <div id="content-three">
        <div class="musicListIndex">
            <div class="highqualityEntry">
                <img
                        :src="theFirstHighquality.coverImgUrl"
                        alt=""
                        class="backgroundImg"
                />
                <div class="highItems" v-for="(item,index) in theHighquality" :key="index">
                    <div class="cover">
                        <img :src="item.coverImgUrl" alt=""/>
                    </div>
                    <div class="EntryInfo">
                        <div class="name">{{ item.name }}</div>
                    </div>
                </div>

            </div>
            <div class="list-bottom">
                <!-- 歌单列表 -->
                <div class="musicListNavBar">
                    <div class="left">
                        <p>最热</p>
                        <sort-box
                                :currentTag="currentTag"
                                :sortList="sortList"
                                @getSortList="getSortList"
                                @clickSortBoxItem="clickSortBoxItem"
                        ></sort-box>
                    </div>
                    <div class="right">
                        <second-nav-bar
                                :SecondNavBarData="hotTags"
                                :itemWidth="0"
                                :currentTag="currentTag"
                                @clickSecondBarItem="clickSecondBarItem"
                        ></second-nav-bar>
                    </div>
                </div>
                <!-- 展示歌单列表 -->
                <list-card
                        :listCardData="musicList.playlists"
                        @clickListCardItem="clickListCardItem"
                ></list-card>
                <!-- 分页 -->
                <div class="page" v-if="musicList.playlists">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="musicList.total"
                            :page-size="50"
                            small
                            :current-page="currentPage"
                            @current-change="pageChange">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import SortBox from "@/components/sortBox/SortBox";
    import SecondNavBar from "@/components/secondNavBar/SecondNavBar";
    import ListCard from "@/components/listCard/ListCard";

    export default {
        name: "ContentTwo",
        components: {SortBox, SecondNavBar, ListCard},
        data() {
            return {
                theHighquality: {},
                theFirstHighquality: {},
                hotTags: [],
                musicList: {},
                currentTag: {},
                currentPage: 1,
                // 分类数据
                sortList: [],
            };
        },
        methods: {
            // 获取高质量歌单的数据
            async getTheFirstOfHighquality() {
                let result = await this.$request("/top/playlist/highquality", {
                    limit: 6,
                });
                //   console.log(result);
                this.theHighquality = result.data.playlists;
                this.theFirstHighquality = result.data.playlists[0];
                //   console.log(this.theFirstOfHighquality);
            },
            // 获取10个热门歌单tag数据
            async getHotTag() {
                let result = await this.$request("/playlist/hot");
                // console.log(result);
                this.currentTag = result.data.tags[0];
                this.hotTags = result.data.tags;
            },
            // 根据分类请求歌单列表
            async getMusicList() {
                this.musicList = {};
                let result = await this.$request("/top/playlist", {
                    cat: this.currentTag.name,
                    offset: 50 * (this.currentPage - 1),
                });
                console.log(result);
                this.musicList = result.data;
            },

            // 获取歌单分类数据
            async getSortList() {
                let res = await this.$request("/playlist/catlist");
                console.log(res);
                this.sortList = res.data.sub;
            },

            // 处理点击事件 接收点击二级navbar
            clickSecondBarItem(index) {
                this.currentTag = this.hotTags[index];
                this.currentPage = 1;
                // 清空musicList
                this.getMusicList();
            },
            // 点击sortBoxItem中的歌单
            clickSortBoxItem(item) {
                this.currentTag = item;
                this.currentPage = 1;
                this.getMusicList();
            },
            //当页数发生改变时 page是当前页数
            pageChange(page) {
                this.currentPage = page;
                this.getMusicList();
            },
            // 点击歌单的回调
            clickListCardItem(id) {
                this.$router.push({name: "musicListDetail", params: {id}});
            },

        },
        // created生命周期
        async created() {
            this.getTheFirstOfHighquality();
            await this.getHotTag();
            this.getMusicList();
        },
    }
</script>

<style scoped>
    #content-three {
        background-color: #f7f7f7;
    }

    .musicListIndex {
        width: 900px;
        height: 100%;
        margin: auto;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        background-color: white;
    }

    .highqualityEntry {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .highItems {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: nowrap;
        z-index: 20;
    }

    .EntryInfo {
        position: absolute;
        top: 40%;
        width: 100%;
        text-align: center;
        padding: 4px;
    }

    .backgroundImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transform: translateY(-80px);
        filter: blur(50px) brightness(80%);
    }

    .cover {
        width: 120px;
        height: 120px;
        margin: 10px;
    }

    .cover img {
        border-radius: 10px;
        width: 100%;
        opacity: 0.8;
        box-shadow: 10px 10px white;
    }

    .name {
        color: white;
        font-size: 8px;
        margin: 5px 0;
        transform: scale(0.9, 0.9);
    }

    .list-bottom {
        padding: 20px 10px 20px 10px;
    }

    .left {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .left p {
        padding-right: 5px;
        font-size: 2em;
    }

    .musicListNavBar {
        position: relative;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }

    .page {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
    }

    .page .el-pagination {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #40E0D0;
    }
</style>